<!-- 头部 -->
<template>
  <div class="right-bottom u-p-t-10">
    <div class=" right-bottom-box u-rela">
      <div style="position: absolute;left:10px;width:100%;">
        <h2 class="policeTitle "><span>各年级报警数量趋势</span></h2>
      </div>

      <div class="region-echarts" v-if="pageflag" style="height: 100%">
        <Echart
          :options="regionOptions"
          id="regionChart"
          class="region-echarts_center"
        ></Echart>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
export default {
  name: "leftTopBox",
  components: {
    Echart,
  },
  props:{
     schooleId:{
       type:[String, Number],
       default:0
     }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 区域分布
    };
  },

  mounted() {
    this.getDataHandler();
  },
  methods: {
    async getDataHandler(){
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/police_center/getGradeResortTrend', { params })
      // console.log(data,'=======data')
      try{
        if ( data.code === 0 ) {
          this.getData(data.data)
        }
      } catch {
        console.log('error')
      }
    },
    getData(data) {

      let res = {
        data1: data.map(iv=>{return iv.resort_count_month}),
        data2: data.map(iv=>{return iv.resort_count_week}),
        data3: data.map(iv=>{return iv.resort_count_year}),
      };
      const titleData=data.map(iv=>{return iv.title})
      this.pageflag = true;
      if (res) {
        this.init(res,titleData);
      }
    },
    init(newData,titleData) {
      // 区域分布
      this.regionOptions = {
        color: ["#5c00ff"],
        legend: {
          textStyle: {
            color: "#ffffff",
          },
          itemWidth: 15,
          itemHeight: 15,
          right: 0,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            let data = `${params[0].name}`
            params.forEach(iv => {
              let str=`

                <div class="flex align-center">
                  <p style="width:8px;height:8px;background:${iv.color};border-radius:50%;"></p>
                  <p class="u-m-l-4">${iv.seriesName} <span class="u-m-l-10">${iv.value}条</span></p>
                </div>
              `
              data+=str
            });
            return data
          }
        },
        grid:{
          left:40,
          right:20,
          bottom:20,
          top:100,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#ccc",
          },
          data: titleData,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#ccc",
            formatter: function (value) {
              return value + '条';
            }
          }
        },
        series: [
         {
            name: "本年",
            type: "line",
            data: newData.data3,
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#1684fc",
                borderColor: "#ccc",
                barBorderRadius: 6

              },
            }
          },this.getBarData({
              name:'本月',
              data:newData.data1,
              color: "#FDB01A"
          }),this.getBarData({
              name:'本周',
              data:newData.data2,
              color: "#01DCFF"
          })

        ]
      };
    },
    getBarData(data) {
      return {
        name: data.name || "",
        type: "bar",
        data: data.data,
        barWidth: 10, //柱子宽度
        barGap: 0.2, //柱子之间间距
        itemStyle: {
          color: data.color
        },
      };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.right-bottom{
  width: 100%;
  height: 100%;

  &-box {
    height: 100%;
  }
}
</style>
